<template>
  <div class="container">
    <el-card class="choice">
      <!-- 按钮 -->
      <el-row>
        <el-button
          type="success"
          size="small"
          icon="el-icon-edit"
          style="float: right"
          @click="$router.push('new')"
          >新增试题</el-button
        >
      </el-row>
      <!-- 筛选 -->
      <el-form label-width="80px" size="small" style="margin-top: 15px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                v-model="form.subjectID"
                placeholder="请选择"
                style="width: 100%"
                @change="getdirectoryslist"
              >
                 <el-option :label="item.label" :value="item.value" v-for="item in subjectOptions" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                v-model="form.catalogID"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option :label="item.label" :value="item.value" v-for="item in catalogOptions" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                v-model="form.tags"
                placeholder="请选择"
                style="width: 100%"
              >
              <el-option :label="item.label" :value="item.value" v-for="item in tagsOptions" :key="item.value"></el-option>

              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="form.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                v-model="form.questionType"
                placeholder="请选择"
                style="width: 100%"
              >
                 <el-option :label="item.label" :value="item.value+''"  v-for="item in questionTypeoption" :key="item.value"></el-option>

              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                v-model="form.difficulty"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option :label="item.label" :value="item.value+''"  v-for="item in difficultyoption" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                v-model="form.direction"
                placeholder="请选择"
                style="width: 100%"
              >
                 <el-option :label="item" :value="item" v-for="item in directionoption" :key="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                v-model="form.creatorID"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option :label="item.username" :value="item.id" v-for="item in useroption" :key="item.id"></el-option>

              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="form.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                v-model="form.province"
                placeholder="请选择"
                style="width: 50%"
                @change="getcitylist"
              >
                 <el-option :label="item" :value="item" v-for="(item,index) in provincesoptions" :key="index"></el-option>
              </el-select>
              <el-select
                v-model="form.city"
                placeholder="请选择"
                style="width: 50%"
              >
               <el-option :label="item" :value="item" v-for="(item,index) in citysoption" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button
              type="primary"
              size="small"
              style="float: right; margin-left: 10px"
              @click="searchlist"
              >搜索</el-button
            >
            <el-button size="small" style="float: right" @click="removelist">清除</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-alert :title="`数据一共${counts}条数`" type="info" show-icon style="margin-bottom:20px"> </el-alert>
      <el-table :data="questionslist" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="180"></el-table-column>
        <el-table-column prop="subject" label="学科" width="180"></el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column prop="questionType" label="题型">
          <template #default={row}>
            {{row.questionType| getquestionType}}
          </template>
        </el-table-column>
        <el-table-column label="题干">
          <template #default='{row}'>
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间">
          <template #default='{row}'>
            {{row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template #default={row}>
            {{row.difficulty| getdifficulty}}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default='{row}'>
            <el-row>
              <el-button icon="el-icon-view"  type="primary" plain circle size="small" @click="showlist(row)"></el-button>
              <el-button type="success" plain icon="el-icon-edit" circle size="small" @click="$router.push(`new?id=${row.id}`)"> </el-button>
              <el-button type="danger" plain icon="el-icon-delete" circle size="small" @click="dellist(row.id)" ></el-button>
              <el-button type="warning" plain icon="el-icon-check" circle size="small" @click="joinchoice(row.id)"></el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
       <div class="block">
    <el-pagination
      :page-sizes="[1, 2, 4, 6]"
    style="float:right"
    background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.page"
      :page-size="form.pagesize"
      layout="prev, pager, next,sizes,  jumper"
      :total="counts">
    </el-pagination>
  </div>
  <!-- 弹出框 -->
<questions-preview :dialogVisible.sync='dialogVisible' ref="questionspreview" :data="questioninfo"></questions-preview>
    </el-card>
  </div>
</template>

<script>
// 录入人
import { simple as users } from '@/api/base/users.js'
// 标签
import { simple as tagslist } from '@/api/hmmm/tags.js'
// 方向
import { direction, questionType, difficulty } from '@/api/hmmm/constants.js'
// 获取城市和城市下地区
import { provinces, citys } from '@/api/hmmm/citys.js'
// 企业列表
import { list as companyslist } from '@/api/hmmm/companys.js'
// 简单目录列表
import { simple as directoryslist } from '@/api/hmmm/directorys.js'
// 学科列表
import { simple as getsimple } from '@/api/hmmm/subjects.js'

import { list, choiceAdd, remove } from '@/api/hmmm/questions.js'
import questionsPreview from '../components/questions-preview.vue'
export default {
  components: { questionsPreview },
  name: 'xx',
  data () {
    return {
      // 控制弹出框显示与隐藏
      dialogVisible: false,
      counts: 0,
      form: {
        page: 1,
        pagesize: 6,
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null
      },
      // 基础题库
      questionslist: [],
      // 学科选项
      subjectOptions: [],
      // 目录选项
      catalogOptions: [],
      // 企业选项
      enterpriseOptions: [],
      // 城市
      provincesoptions: provinces(),
      // 地区
      citysoption: [],
      // 方向
      directionoption: direction,
      // 题型
      questionTypeoption: questionType,
      // 难度
      difficultyoption: difficulty,
      // 标签
      tagsOptions: [],
      // 入录人
      useroption: [],
      // 预览框信息
      questioninfo: {}
    }
  },
  created () {
    this.getsimplelist()
    this.getcompanyslist()
    // this.gettagslist()
    this.getquestionslist()
    this.getuserlist()
  },
  methods: {
    // 删除
    async dellist (id) {
      const { data } = await remove({ id })
      console.log(data)
      this.getquestionslist()
    },
    // 进入精选
    joinchoice (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { data } = await choiceAdd({ id: id, choiceState: 1 })
        console.log(data)
        this.getquestionslist()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 浏览功能
    showlist (item) {
      this.questioninfo = item
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.questionspreview.open()
      })
    },

    // 清除功能
    removelist () {
      this.form = {
        page: 1,
        pagesize: 6,
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null
      }
      this.getquestionslist()
    },
    // 搜索
    async searchlist () {
      this.form.page = 1
      this.getquestionslist()
    },
    // 获取入录人
    async getuserlist () {
      const { data } = await users()
      console.log(data)
      this.useroption = data
    },
    // 获标签
    // async gettagslist () {
    //   const { data } = await tagslist()
    //   this.tagsOptions = data
    // },
    // 获取城市下地区
    getcitylist () {
      this.form.city = null
      this.citysoption = citys(this.form.province)
    },
    // 获取企业列表
    async getcompanyslist () {
      const { data } = await companyslist()
      console.log(data)
      this.enterpriseOptions = data.items
    },
    // 获取简单目录
    async getdirectoryslist () {
      this.form.catalogID = null
      const { data } = await directoryslist({ subjectID: this.form.subjectID })
      // console.log(data)
      this.catalogOptions = data
      this.form.tags = null
      const { data: res } = await tagslist({ subjectID: this.form.subjectID })
      this.tagsOptions = res
    },
    // 获取学科简单列表
    async getsimplelist () {
      const { data } = await getsimple()
      // console.log(data)
      this.subjectOptions = data
    },
    // 分页器的切换
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.form.pagesize = val
      this.getquestionslist()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.form.page = val
      this.getquestionslist()
    },
    // 获取基础题库列表
    async getquestionslist () {
      const { data } = await list(this.form)
      console.log(data)
      this.questionslist = data.items
      this.counts = data.counts
    }
  },
  filters: {
    getdifficulty (val) {
      const data = difficulty.find(item => item.value === +val)
      console.log(data)
      return data ? data.label : '未知'
    },
    getquestionType (val) {
      const data = questionType.find(item => item.value === +val)
      return data ? data.label : '未知'
    }
  }
}
</script>

<style scoped lang='scss'>
.choice {
  margin: 10px 9px 0;
}
</style>
